<template>
<div id="bkg">
  <el-row class = "top_box">
      <el-col :span="2">
          <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="logout()"><i class="el-icon-caret-left" />退出</el-button>
      </el-col>
      <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;margin-top:5px;text-align:center">
          我的主页
      </el-col>
      <el-col :span="2">
      <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
      </el-col>
  </el-row>
  <el-container style="min-height:1000px">
    <el-container>
    <!-- 左侧菜单 -->
      <el-aside width="200px"
          style="background-color:rgba(162, 143, 202, 0.3); height:900px;margin-top:20px">
        <leftMenu
        :default-active="this.$router.path"
        @choosePath="choosePath"
        ></leftMenu>

      </el-aside>
      <el-main style="text-align: left;padding: 100px 0 0 250px">
        <div class="index_header" style="font-size:20px;text-align:center;padding-top:10px">
          {{part}}好！今天是{{today}}，现在时间{{nowTime}}
        </div>
        <div>
          <div class="index_block">
          <template>
            <div style="margin-top:20px">
              <!-- 本日数据 -->
              <mEcharts
                :myChart="chart_id"
                :echartStyle="chart1_s"
                :titleText="chart1_a"
                :tooltipFormatter="chart1_b"
                :opinion="chart1_c"
                :seriesName="chart1_d"
                :opinionData="chart1_e"
              ></mEcharts>
            </div>
          </template>
          </div>
          <div class="index_block">
          <template>
            <div style="margin-top:20px">
              <!-- 30日数据 -->
              <mEcharts2
                :echartStyle="chart2_s"
                :titleText="chart2_a"
                :tooltipFormatter="chart2_b"
                :opinion="chart2_c"
                :seriesName="chart2_d"
                :opinionData="chart2_e"
              ></mEcharts2>
            </div>
          </template>
          </div>
          <div class="index_block">
          </div>
          <div class="index_block"></div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<style>

#bkg {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}

.index_block {
  height:400px;
  width: 600px;
  /* border: 2px solid #c6d6b8; */
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  margin : 30px 20px 20px 60px;
  padding: 10px 0px 10px 0px;
  float: left;
  box-shadow: 5px 5px 20px #a18fbe70;
}

.index_header {
  height:40px;
  width: 1284px;
  border-radius: 8px;
  box-shadow: 5px 5px 15px #a18fbe50;
  background-color: rgba(255, 255, 255, 0.3);
  margin : 20px 20px 20px 60px;
  float: left;
}
</style>

<script>
import leftMenu from '../components/myComponents/leftMenu'
import mEcharts from './myComponents/Echarts'
import mEcharts2 from './myComponents/Echarts2'
export default {
  name: 'AdminIndex',
  components:{
    mEcharts,
    mEcharts2,
    leftMenu
  },
  data(){
    return{
      chart_id:'myChart',
      userLogo: '../pics/nikki.JPG',
      chart1_a:'今日收到答卷',
      chart1_b:'答卷数量',
      chart1_c:['关于水果的调查问卷','对于XX的意见收集','问卷三','问卷四','问卷五'],
      chart1_d:'答卷统计',
      chart1_e:[
          {value:11, name:'关于水果的调查问卷'},
          {value:15, name:'对于XX的意见收集'},
          {value:8, name:'问卷三'},
          {value:12, name:'问卷四'},
          {value:5, name:'问卷五'}
        ],
      chart1_s:{height: '380px',width:'600px'},

      chart2_a:'近30日收到答卷',
      chart2_b:'答卷数量',
      chart2_c:['关于水果的调查问卷','对于XX的意见收集','问卷三','问卷四','问卷五'],
      chart2_d:'答卷统计',
      chart2_e:[
          {value:29, name:'关于水果的调查问卷'},
          {value:52, name:'对于XX的意见收集'},
          {value:48, name:'问卷三'},
          {value:36, name:'问卷四'},
          {value:85, name:'问卷五'},
          {value:37, name:'问卷六'}
        ],
      chart2_s:{height: '380px',width:'600px'},
      
      date: new Date(),
      part: "",
      today: "",
      nowTime: ""

    }
  },
  methods:{

    choosePath(key){
      switch (key) {
        case "myReceived":
          this.$router.push({path: '/myReceived'})
          break;
        case "statistics":
          this.$router.push({path: '/myReceived'})
          break;
        case "myCreated":
          this.$router.push({path: '/myCreated'})
          break;
        case "myModels":
          this.$router.push({path: '/myModels'})
          break;
        default:
          break;
      }
    },

    logout(){
      this.$router.push({path: '/'})
    },

    getDate(){
      let year = this.date.getFullYear()
      let month =this.date.getMonth()+1
      let hour = this.date.getHours()
      let minute = this.date.getMinutes()
      let second = this.date.getSeconds()
      if(hour<10){
        hour = "0"+hour
      }
      if(minute<10){
        minute = "0"+minute
      }
      if(second<10){
        second = "0"+second
      }
      if(hour<12){
        this.part = "上午"
      }
      if(hour>=12){
        this.part = "下午"
      }
      let weekday= ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]
      let week = weekday[this.date.getDay()]
      this.today = year+"年"+month+"月"+this.date.getDate()+"日"+week
      this.nowTime = hour+":"+minute+":"+second
    },
    getEchartData(val){
      console.log(val);
    }
  },
  mounted() {
    this.getDate()
    let _this = this; 
    this.timer = setInterval(() => {
      _this.date = new Date();
      _this.getDate()
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 清除定时器
    }
  }
}
</script>
